<template>

    <div id="nav">

      <router-link to="/patient/index">
        <img src="@/assets/img/icon/edit.png" class="icon" alt="icon" />
        <img src="@/assets/img/icon/edit1.png" class="icon_hover" alt="icon" />
        <span>手术申请查询</span>
      </router-link> 
      
      <router-link to="/patient/check">
        <img src="@/assets/img/icon/checkrep.png" class="icon" alt="icon" />
        <img src="@/assets/img/icon/checkrep.png" class="icon_hover" alt="icon" />
        术前核查
      </router-link>

      <router-link to="/patient/state">
        <img src="@/assets/img/icon/state.png" class="icon" alt="icon" />
        <img src="@/assets/img/icon/state.png" class="icon_hover" alt="icon" />
        患者状态
      </router-link>

      <router-link to="/patient/outsick">
        <img src="@/assets/img/icon/outsick.png" class="icon" alt="icon" />
        <img src="@/assets/img/icon/outsick.png" class="icon_hover" alt="icon" />
        患者出病区
      </router-link>

      <router-link to="/patient/returnsick">
        <img src="@/assets/img/icon/retrunsick.png" class="icon" alt="icon" />
        <img src="@/assets/img/icon/retrunsick.png" class="icon_hover" alt="icon" />
        患者回病区
      </router-link>

      <router-link to="/patient/leave">
        <img src="@/assets/img/icon/leave.png" class="icon" alt="icon" />
        <img src="@/assets/img/icon/leave.png" class="icon_hover" alt="icon" />
        离院
      </router-link>


    </div>


</template>

<script lang="ts">

    import {
        Component,
        Prop,
        Vue
    } from 'vue-property-decorator';

    @Component

    export default class Nav extends Vue {
    }
</script>


<style lang="scss" scoped>
    #nav {
       
        height: $navH;
        background:$themecolor;
        color:$color;
        text-align: left;
        a {
            font-weight: bold;
            color: $color;
            height:$navH;
            display:inline-block;
            line-height:$navH;
            padding:0 0.15rem;
            border-right:1px solid $color;
            font-size: 0.14rem;
            font-weight:500;
            &:hover,&.router-link-exact-active {
                color: $themecolor;
                background:$color;
                .icon{
                    display:none;
                }
                .icon_hover{
                    display:inline-block; 
                }
            }
            .icon{
                margin-right:5px;
                width:20px;
                margin-top: -5px;
            }
            .icon_hover{
                width:20px;
                margin-right:5px;
                margin-top: -5px;
                display:none;
            }
        }
        a:first-child{
            margin-left:0.3rem;
        }
    }
</style>